<template>
	<div>
		<el-row>
			<el-col :span="8">
				<el-card>
					<el-upload name="files[0]" class="avatar-uploader" :action="uploadsImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess7" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl7" :src="imageUrl7" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<div style="padding: 14px;">
						<span>洗车卡默认图</span>
						<div class="bottom clearfix">
							<el-button @click="modDefaultPic('7')" type="primary">确定修改</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card>
					<el-upload name="files[0]" class="avatar-uploader" :action="uploadsImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess8" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl8" :src="imageUrl8" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<div style="padding: 14px;">
						<span>优惠券默认图</span>
						<div class="bottom clearfix">
							<el-button @click="modDefaultPic('8')" type="primary">确定修改</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card>
					<el-upload name="files[0]" class="avatar-uploader" :action="uploadsImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess9" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl9" :src="imageUrl9" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<div style="padding: 14px;">
						<span>首页优惠券图</span>
						<div class="bottom clearfix">
							<el-button @click="modDefaultPic('9')" type="primary">确定修改</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card>
					<el-upload name="files[0]" class="avatar-uploader" :action="uploadsImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess10" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl10" :src="imageUrl10" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<div style="padding: 14px;">
						<span>首页洗车卡图</span>
						<div class="bottom clearfix">
							<el-button @click="modDefaultPic('10')" type="primary">确定修改</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import http from 'assets/js/http.js'

	export default {
		components: {

		},
		data() {
			return {
				uploadsImgUrl: 'http://www.tp51.com/index/index/uploads',
				imageUrl7: '',
				imageUrl8: '',
				imageUrl9: '',
				imageUrl10: '',
				currentUrl: '',
			}
		},
		created() {
			this.init()

		},
		methods: {
			init() {
				this.tableData()
			},
			tableData() {
				// 表格数据
				const data = {

				}
				// 请求地址
				let url = '/AdminApi/OtherAdmin/imgDefault'

				this.apiPost(url, data).then(res => {
					console.log('默认图res', res)
					this.handelResponse(res, data => {
						let that = this
						data.map(function(i) {
							switch (i.id){
								case 7:
									that.imageUrl7 = i.value
									console.log('that.imageUrl7', that.imageUrl7)
									break;
								case 8:
									that.imageUrl8 = i.value
									break;
								case 9:
									that.imageUrl9 = i.value
									break;
								case 10:
									that.imageUrl10 = i.value
									break;
								default:
									break;
							}
						})
						_g.closeGlobalLoading()
					})
				})
			},
			modDefaultPic(num) {
				const data = {
					type: num,
					img: this.currentUrl
				}
				let url = '/AdminApi/OtherAdmin/imgDeEdit'
				this.apiPost(url, data).then(res => {
					console.log('默认图res', res)
					this.handelResponse(res, data => {
						_g.closeGlobalLoading()
					})
				})
			},
			handleAvatarSuccess7(res, file) {
				console.log('上传图片res', res)
				console.log('file', file)
				this.imageUrl7 = res.data[0]
				this.currentUrl = res.data[0]

			},
			handleAvatarSuccess8(res, file) {
				console.log('上传图片res', res)
				console.log('file', file)
				this.imageUrl8 = res.data[0]
				this.currentUrl = res.data[0]

			},
			handleAvatarSuccess9(res, file) {
				console.log('上传图片res', res)
				console.log('file', file)
				this.imageUrl9 = res.data[0]
				this.currentUrl = res.data[0]

			},
			handleAvatarSuccess10(res, file) {
				console.log('上传图片res', res)
				console.log('file', file)
				this.imageUrl10 = res.data[0]
				this.currentUrl = res.data[0]

			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!')
				}
				return isLt2M
			},
		},
		mixins: [http]
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>